<template>
	<AppHeader :title="title" :banAnimate="true" backgroundColor="rgba(0,0,0,0)" titleColor="#ffffff">
		<template #left>
			<van-icon name="cross" :size="17" color="#ffffff" @click="handleSubmit"/>
		</template>
	</AppHeader>
	<div class="container" v-if="listeningSuccessData">
		<div class="top-bg">
			<div class="score">{{listeningSuccessData.score}}</div>
			<div class="comments">{{listeningSuccessData.msg}}</div>
			<div class="success-txt">
				<span>作业提交成功</span>
				<img src="@/assets/images/listening/icon-done.png" />
			</div>
		</div>
		<div class="score-details">
			<van-cell title="总分" value="30" />
			<van-cell title="作答用时" :value="listeningSuccessData.use_time" />
			<van-cell title="查看详情" is-link @click="handleClickDetails" />
			<div class="submit-btn">
				<div class="btn" @click="handleSubmit">完成</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		ref,
		onMounted,
		onUnmounted,
	} from "vue";
	const router = useRouter();
	const route = useRoute();
	const title = route.query.title;
	const listeningSuccessData = ref()
	
	const handleSubmit = () => {
		localStorage.removeItem('listeningSuccessInfo')
		localStorage.removeItem('listeningSuccessData')
		if(route.query.mission_id){
			router.go(-3)
		}else{
			router.go(-5)
		}
	}
	const handleClickDetails = () => {
		router.push({
			path: "/listening/work-details",
			query: {
				versionId: route.query.versionId,
				title: route.query.title
			},
		});
	};
	onMounted(() => {
		let listeningSuccessJSON = localStorage.getItem("listeningSuccessData")
		listeningSuccessData.value = JSON.parse(listeningSuccessJSON)
		// console.log(listeningSuccessData.value)
	});
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #f5f5f5;

		.top-bg {
			height: 280px;
			padding-top: 90px;
			background: url("../../assets/images/listening/work-bg.png") center no-repeat;
			background-size: cover;
			text-align: center;
			color: #fff;

			.score {
				font-size: 66px;
				margin-bottom: 20px;
			}

			.comments {
				font-size: 18px;
				margin-bottom: 30px;
				letter-spacing: 2px;
			}

			.success-txt {
				font-size: 18px;
				display: flex;
				align-items: center;
				justify-content: center;

				span {
					margin-right: 10px;
				}

				img {
					width: 18px;
					height: 18px;
				}
			}
		}

		.score-details {
			padding-top: 10px;
			width: calc(100% - 20px);
			height: 230px;
			background-color: #ffffff;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 300px;
			border-radius: 15px;

			.submit-btn {
				width: 100%;
				position: absolute;
				background-color: #fff;
				padding: 10px 0;
				left: 0;
				bottom: 10px;
				text-align: center;

				.btn {
					width: calc(100% - 20px);
					height: 45px;
					line-height: 45px;
					display: inline-block;
					background: linear-gradient(270deg, #29f19c 0%, #02a1f9 100%);
					border-radius: 23px;
					text-align: center;
					font-size: 18px;
					color: #ffffff;
				}
			}
		}
	}
</style>